<template>
  <div  class="min-h-65% bg-gray-100">
    <el-scrollbar ref="scrollBar" @scroll="setHandleScroll">
      <div
        ref="chatBox"
        class="pt-4 px-4"
      >
        <div v-if="loading" class=" flex justify-center items-center">
          <div class="animate-spin bg-blue-500 wh-5! i-carbon-restart"></div>
        </div>
        <div v-else-if="!noMore && !loading" class="flex justify-center items-center text-blue-500 cursor-pointer underline" >查看更多消息</div>
        <div v-else></div>
        
        <template  :key="item?._id" v-for="item in chatContent.slice(entries)">
          <div  :class="`flex ${item?.from?._id === user?._id ? 'flex-row-reverse': 'flex-row'} justify-start items-center px-4 pb-4`">
            <div :class="`flex ${item?.from?._id === user?._id ? 'flex-row-reverse': 'flex-row'} justify-start`">
              <RouterLink :to="`/accountCenter/postList/${item?.from?._id}`">
                <img :src="IMG_URL_SERVER +item?.from?.avatar?.url" :alt="item?.from?.avatar?.name" class="avatar wh-6">
              </RouterLink>
              <div class=" bg-white p-2 mx-4 rounded-md" v-html="item?.message"></div>
            </div>
          </div>
        </template>    
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia"
import { fetchChat } from "@/server"
import { IMG_URL_SERVER } from "@/config"
import { useSocketStore } from "@/store"


//route
const route = useRoute()
//chat
const chatContent:any = ref([])
const chatBox:any = ref() //Dom
//scrollBarDom
const scrollBar:any = ref()
//登录用户Store
const authStore = useAuthStore()
const { user } = storeToRefs(authStore)
//等待加载
const loading = ref(false)
//socketStore
const socketStore = useSocketStore()
socketStore.chatContent = chatContent
socketStore.chatBox = chatBox
socketStore.scrollBar = scrollBar

//聊天socket
const socket = inject<any>('socket')


//接收socket信息
socket.on('toMsg', async (data: any) => {
  if (user.value._id === data.to._id) {
    chatContent.value.push(data)
  }
  await nextTick()
  scrollBar?.value?.setScrollTop(chatBox.value.scrollHeight)
})


//加载更多
const entryStep:number = 10 //跳过
let entries = ref(-10)
const noMore = computed(() => -entries.value >= (chatContent.value?.length-1))
const setHandleScroll = computed(() => noMore.value || handleScroll) //设置函数和取消函数
const handleScroll = ({ scrollTop }:any)=>{
  if (scrollTop === 0){
    const lastHeight = chatBox.value.scrollHeight
    loading.value = true
    setTimeout(async ()=>{
      entries.value -= entryStep
      loading.value = false
      await nextTick()
      const currentHeight = chatBox.value.scrollHeight
      scrollBar?.value?.setScrollTop(currentHeight - lastHeight)
    },500)
  }
  
}




watchEffect(()=>{
  fetchChat(route.params.id as string,()=>true).then( async (data)=>{
    chatContent.value = data 
    await nextTick()
    scrollBar?.value?.setScrollTop(chatBox.value.scrollHeight)
  })

},{flush:'post'})

</script>

<style scoped lang="scss">


</style>
<route lang="yaml">
meta:
  layout: home
</route>